(function() {
    window.copy_obj = function(src_obj){
        return JSON.parse(JSON.stringify(src_obj));
    }
    window.initOperatePanel = function(){
        if(window.vMainPanel === undefined){
            // bind value and input dom
            if(window.vArgObj == undefined){
                window.vArgObj = {"inputs":{}};
                window.vargs = new Proxy(window.vArgObj, {
                    set: function(target, key, value){
                        console.log(target);
                        switch(typeof( value )){
                            case 'string':
                                if(target['inputs'][key]!= undefined)
                                    target['inputs'][key].value = value;
                                break;
                            case 'object':
                                if(target['inputs'][key]!= undefined)
                                    target['inputs'][key].value = JSON.stringify( value );
                                break;
                            default:
                                if(target['inputs'][key]!= undefined)
                                    target['inputs'][key].value = value;
                                break;
                        }
                        if(key == 'v_json'){
                            return;
                        }
                        target[key] = value;
                        var dd = copy_obj(window.vargs);
                        delete dd['inputs'];
                        window.vargs["v_json"] = JSON.stringify(dd); 
                        console.log(`${key} > ${value}`);
                        return true;
                    }
                })
            }
            window.vMainPanel = document.createElement("div");
            window.vMainPanel.setAttribute(
                "style",
                "position: fixed; height: 600px;width: 300px;top:135px;left: 5px; background: #b4d145;z-index: 9999;"
            );
            document.body.appendChild(window.vMainPanel);

            var toogle_btn =  document.createElement("button");
            toogle_btn.innerHTML = '-';
            toogle_btn.setAttribute(
                "style",
                "position: fixed; height: 30px;width: 30px;top:100px;left: 5px; background: #b4d145;z-index: 9999;"
            );
            var toggle_btn_func = function(){
                window.vMainPanel.hidden = !window.vMainPanel.hidden;
            }
            toogle_btn.addEventListener('click',  toggle_btn_func);
            document.body.appendChild(toogle_btn);
        }
    };

    window.addOperateButton = function(btn_text, btn_click){
        initOperatePanel();
        var tmp_btn =  document.createElement("button");
        tmp_btn.innerHTML = btn_text;
        tmp_btn.setAttribute("style","height:50px;width:100px;");
        tmp_btn.addEventListener('click',  btn_click);
        window.vMainPanel.appendChild(tmp_btn);
        return tmp_btn;
    }

    window.addOperateCheckbox = function(label_text, onchange){
        initOperatePanel();
        var random_id = 'vid_'+Math.floor( Math.random() * 100000000);
        var label = document.createElement("label");
        label.htmlFor = random_id;
        label.appendChild(document.createTextNode(label_text));

        var input_separate_report = document.createElement("input");
        input_separate_report.type = 'checkbox';
        input_separate_report.id = random_id;
        input_separate_report.addEventListener('change', onchange);
        window.vMainPanel.appendChild(input_separate_report);
        window.vMainPanel.appendChild(label);
        return input_separate_report;
    }

    window.addOperateTextarea = function(onchange){
        initOperatePanel();
        var input_textarea = document.createElement("textarea");
        input_textarea.setAttribute("style","height:180px;width:290px;");
        input_textarea.addEventListener('change', onchange);
        window.vMainPanel.appendChild(input_textarea);
        return input_textarea;
    };

    window.vLogMessage = function(logstr){
        if(window.vlogpanel === undefined)
            window.vlogpanel = addOperateTextarea();
        window.vlogpanel.value+="\n"+logstr;
    };

    window.addInput = function (
        label_text,
        callback_or_variable,
        default_text = "",
        input_type = "input"
    ) {
        initOperatePanel();
        var random_id = "vid_" + Math.floor(Math.random() * 100000000);
        var label = document.createElement("label");
        label.htmlFor = random_id;
        label.appendChild(document.createTextNode(label_text));
        var ele_input = document.createElement(input_type);
        ele_input.id = random_id;
        if (typeof callback_or_variable === "string") {
            var input_event_listener_change = function (event) {
                try {
                    console.log(event.target.value);
                    window.vargs[callback_or_variable] = event.target.value.trim();
                    if (event.target.value != ""){
                    }
                } catch (e) {
                    console.log(e);
                    vLogMessage("Change Error");
                    window.vArgObj[callback_or_variable] = undefined;
                    return;
                }
            };
            ele_input.addEventListener("change", input_event_listener_change);
        } else {
            ele_input.addEventListener("change", callback_or_variable);
        }
        ele_input.value = default_text.trim();
        ele_input.style = "width:100%;";
        
        window.vMainPanel.appendChild(label);
        window.vMainPanel.appendChild(document.createElement("br"));
        window.vMainPanel.appendChild(ele_input);
        window.vMainPanel.appendChild(document.createElement("br"));
        window.vArgObj['inputs'][callback_or_variable] = ele_input;
        ele_input.dispatchEvent(new Event("change"));
        return ele_input;
    };

    window.runInPage = function (funcName, funcArg) {
        var tempFunc = "(" + functionName.toString() + ")(" + JSON.stringify(funcArg) + ")";
        var tempScript = document.createElement("script");
        tempScript.innerHTML = tempFunc;
        document.body.appendChild(tempScript);
    };
    window.vaddElement = function(ele){
        initOperatePanel();
        if( typeof(ele) == 'string'){
            ele = document.createElement(ele);
        }
        window.vMainPanel.appendChild(ele);
    }
    window.addSelectInput = function(label_text, callback_or_variable, options){
        initOperatePanel();
        var random_id = "vid_" + Math.floor(Math.random() * 100000000);
        var label = document.createElement("label");
        label.htmlFor = random_id;
        label.appendChild(document.createTextNode(label_text));
        var ele_input = document.createElement('select');
        ele_input.id = random_id;
        if (typeof callback_or_variable === "string") {
            var input_event_listener_change = function (event) {
                try {
                    
                    console.log('you select: ',event.target.value);
                    window.vargs[callback_or_variable] = event.target.value.trim();
                } catch (e) {
                    console.log(e);
                    vLogMessage("Change Error");
                    window.vArgObj[callback_or_variable] = undefined;
                    return;
                }
            };
            ele_input.addEventListener("change", input_event_listener_change);
        } else {
            ele_input.addEventListener("change", callback_or_variable);
        }
        for(var i = 0 ;i < options.length ; i++){
            var tmp_option = document.createElement('option');
            tmp_option.value = options[i].value;
            tmp_option.text = options[i].text;
            ele_input.appendChild(tmp_option);
        }
        ele_input.style = "width: 100%";
        ele_input.dispatchEvent(new Event('change'));

        window.vMainPanel.appendChild(label);
        window.vMainPanel.appendChild(document.createElement("br"));
        window.vMainPanel.appendChild(ele_input);
        window.vMainPanel.appendChild(document.createElement("br"));
        window.vArgObj['inputs'][callback_or_variable] = ele_input;
    }
})();